import React, { Component, useEffect } from 'react'
import { Text, View } from 'react-native'
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Image, Icon } from 'react-native-elements';
import ImageTest from './components/ImageTest'

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const BottomTabNavigator = ({ navigation }) => {
  useEffect(_ => {
    navigation.setOptions({
      headerShown: false,
    })
    navigation.navigate("home")
  }, [])
  return (
    <Tab.Navigator initialRouteName="home" backBehavior="none">
      <Tab.Screen
        name="home"
        component={require('./pages/bottomTab/home').default}
        options={{
          title: "首页",
          tabBarIcon: ({ focused }) => <ImageTest />
        }}
      />
      <Tab.Screen
        name="mine"
        component={require('./pages/bottomTab/mine').default}
        options={{
          title: "我",
          tabBarIcon: ({ focused }) => <ImageTest />
        }}
      />
    </Tab.Navigator>
  )
}

export class App extends Component {
  render() {
    return (
      <NavigationContainer theme={{
        ...DefaultTheme,
        colors: {
          ...DefaultTheme.colors,
          background: "#fff"
        }
      }}>
        <Stack.Navigator initialRouteName="root">
          <Stack.Screen name="root" component={BottomTabNavigator} />
          <Stack.Screen name="login" component={require("./pages/login").default} />
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
}

export default App
